<template>
  <div class="app-container">
    <!--代理商管理头部展示区-->
    <div class="top">
      <el-button v-for="(item,index) in btnStr" :key="'bloc'+index" type="primary" round style="width: 124px;height: 32px;margin-right: 10px">
        {{ item }}
      </el-button>
      <br />
      <el-input
        v-for="(item,index) in iptStyle"
        :key="index"
        style="width: 200px;height: 36px;margin: 30px 10px 0px 0px"
        :placeholder="item.str"
        :suffix-icon="item.icon"
      >
      </el-input>
    </div>
    <div class="center">
      <el-button type="primary" round style="width: 120px;height: 36px;font-size: 18px">搜索</el-button>
      <el-button round style="width: 120px;height: 36px;font-size: 18px;color: #fff;background: #2EC9C7">导出</el-button>
      <el-button round style="width: 68px;height: 36px;font-size: 18px">列</el-button>
    </div>
    <div class="bottom">
      <el-table ref="table" :data="tableData" size="small" style="width: 100%;">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="blocId" width="159" label="代理商编号"></el-table-column>
        <el-table-column
          prop="blocClinicName"
          width="150"
          label="代理商门诊名称"
        >
          <template slot-scope="scope">
            <a
              style="color: #719DC9;text-decoration:underline"
              @click="blocDetail(scope.row)"
            >{{ scope.row.blocClinicName }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="clinicNature" width="120" label="诊所性质"></el-table-column>
        <!-- <el-table-column prop="blocAdmin" width="135" label="代理商管理员">
          <template slot-scope="scope">
            <a
              style="color: #719DC9;text-decoration:underline"
            >{{ scope.row.blocAdmin }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="billAdmin" width="170" label="代理商账单管理员">
          <template slot-scope="scope">
            <a
              style="color: #719DC9;text-decoration:underline"
            >{{ scope.row.billAdmin }}</a>
          </template>
        </el-table-column> -->
        <el-table-column prop="sign" width="150" label="是否签合同"></el-table-column>
        <el-table-column prop="deadline" width="150" label="合同截止时间"></el-table-column>
        <el-table-column prop="packageRules" width="100" label="套餐规则"></el-table-column>
        <el-table-column prop="ProductRules" width="100" label="产品规则"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnStr: ['创建代理商门诊', '编辑代理商门诊', '规则配置', '暂停合作', '导出诊所'],
      iptStyle: [
        {
          str: '代理商编号',
          icon: 'el-icon-search'
        },
        {
          str: '代理商名称',
          icon: 'el-icon-search'
        },
        {
          str: '合作状态',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '是否签合同',
          icon: 'el-icon-arrow-down'
        },
        {
          str: '创建合同',
          icon: 'el-icon-date'
        }
      ],
      tableData: [{
        blocId: 'LM4401DL190816200101',
        blocClinicName: '北京美中宜和门诊',
        clinicNature: '民营',
        blocAdmin: '管理员',
        billAdmin: '账单管理员',
        sign: '已签',
        deadline: '2019.09.09',
        packageRules: '',
        ProductRules: ''
      }, {
        blocId: 'LM4401DL190816200101',
        blocClinicName: '北京美中宜和门诊',
        clinicNature: '民营',
        blocAdmin: '管理员',
        billAdmin: '账单管理员',
        sign: '已签',
        deadline: '2019.09.09',
        packageRules: '',
        ProductRules: ''
      }, {
        blocId: 'LM4401DL190816200101',
        blocClinicName: '北京美中宜和门诊',
        clinicNature: '民营',
        blocAdmin: '管理员',
        billAdmin: '账单管理员',
        sign: '已签',
        deadline: '2019.09.09',
        packageRules: '',
        ProductRules: ''
      }, {
        blocId: 'LM4401DL190816200101',
        blocClinicName: '北京美中宜和门诊',
        clinicNature: '民营',
        blocAdmin: '管理员',
        billAdmin: '账单管理员',
        sign: '已签',
        deadline: '2019.09.09',
        packageRules: '',
        ProductRules: ''
      }, {
        blocId: 'LM4401DL190816200101',
        blocClinicName: '北京美中宜和门诊',
        clinicNature: '民营',
        blocAdmin: '管理员',
        billAdmin: '账单管理员',
        sign: '已签',
        deadline: '2019.09.09',
        packageRules: '',
        ProductRules: ''
      }, {
        blocId: 'LM4401DL190816200101',
        blocClinicName: '北京美中宜和门诊',
        clinicNature: '民营',
        blocAdmin: '管理员',
        billAdmin: '账单管理员',
        sign: '已签',
        deadline: '2019.09.09',
        packageRules: '',
        ProductRules: ''
      }, {
        blocId: 'LM4401DL190816200101',
        blocClinicName: '北京美中宜和门诊',
        clinicNature: '民营',
        blocAdmin: '管理员',
        billAdmin: '账单管理员',
        sign: '已签',
        deadline: '2019.09.09',
        packageRules: '',
        ProductRules: ''
      }]
    };
  },
  methods: {
    blocDetail(row) {
      this.$router.push('details');
    }
  }
};
</script>

<style scoped>
  .top {
    width: 100%;
    height: 125px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
  }

  .bottom {
    margin-top: 20px;
  }
</style>
